<template>
  <!-- 面试技巧列表 -->
  <div class="shareList">
    <!-- title -->
    <div class="title">
      <div>面试技巧</div>
      <i class="iconfont iconbtn_nav_back" @click="rollback"></i>
    </div>
    <!-- 搜索 -->
    <div class="search" @click="$router.push(`/shareSearch/${share}`)">
      <input type="search" placeholder="请输入关键字" />
      <i class="iconfont iconicon_search"></i>
    </div>
    <!-- 列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      @load="onLoad"
    >
      <div class="detail">
        <div
          class="content"
          v-for="(item, index) in shareList"
          :key="index"
          @click="shareDetail(item.id)"
        >
          <h4>{{ item.title }}</h4>
          <div class="introduce">
            {{ item.content }}
          </div>
          <div class="other">
            <div class="user">
              <img :src="date + item.author.avatar" alt="" />
              <span>{{ item.author.nickname }}</span>
            </div>
            <div class="time">{{ item.created_at | formaTime }}</div>
            <div class="mes">
              <i class="iconfont iconicon_pinglunliang"></i>
              <span>{{ item.article_comments }}</span>
            </div>
            <div class="zan">
              <i class="iconfont iconicon_dianzanliang"></i>
              <span>{{ item.star }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { articlesShare } from '@/api/api.js'
import moment from 'moment'
export default {
  data () {
    return {
      share: 'share',
      shareList: [],
      date: process.env.VUE_APP_URL,
      key: this.$route.params.key,
      start: 0,
      limit: 10,
      artid: '',
      loading: false,
      finished: false
    }
  },
  methods: {
    rollback () {
      this.$router.go(-1)
    },
    async onLoad () {
      this.loading = true
      const res = await articlesShare({
        start: this.start,
        limit: this.limit,
        q: this.key
      })
      this.shareList = [...this.shareList, ...res.data.list]
      this.loading = false
      if (this.shareList.length === res.data.total) {
        this.finished = true
      }
    },
    shareDetail (id) {
      this.$router.push(`/shareDetail/${id}`)
    }
  },
  filters: {
    formaTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.shareList {
  .title {
    position: relative;
    width: 100%;
    text-align: center;
    height: 46px;
    line-height: 46px;
    padding: 0 10px;
    div {
      color: #3b3a3a;
      font-size: 18px;
    }
    i {
      position: absolute;
      top: 0;
      left: 5px;
      font-size: 46px;
      color: #000;
    }
  }
  .search {
    position: relative;
    text-align: center;
    padding: 0 10px;
    input {
      width: 100%;
      height: 36px;
      border: 0;
      background-color: #f7f4f5;
      font-size: 14px;
      color: #cccc;
      text-align: center;
      border-radius: 25px;
    }
    i {
      position: absolute;
      top: 8px;
      left: 118px;
      color: #ccc;
      font-size: 20px;
    }
  }
  .detail {
    .content {
      padding: 0 15px;
      h4 {
        font-size: 16px;
        font-weight: normal;
        margin: 40px 0 10px 0;
        color: #000;
      }
      .introduce {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #5c5d76;
      }
      .other {
        margin-top: 10px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        color: #b4b4bd;
        line-height: 25px;
        .user {
          img {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            vertical-align: middle;
          }
          span {
            font-size: 10px;
            margin-left: 10px;
          }
        }
        .time {
          padding-top: 5px;
          font-size: 12px;
          box-sizing: border-box;
        }
        .mes {
          i {
            font-size: 12px;
          }
          span {
            margin-left: 5px;
            font-size: 12px;
          }
        }
        .zan {
          i {
            font-size: 12px;
          }
          span {
            margin-left: 5px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
